<template>
  <view>
    <uni-search-bar v-model="q" @confirm="addSearchList"></uni-search-bar>
    <view class="search-list">
      <view class="title">
        <text>历史记录</text>
        <text @click="searchList = []">删除</text>
      </view>
      <view class="item" v-for="(v, i) in searchList" :key="i">
        {{v}}
      </view>
    </view>
    <view class="list">
      <list-item v-for="(v, i) in list" :key="i" :v="v"></list-item>
    </view>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.getList()
    },
    watch: {
      q() {
        this.getList()
      },
      searchList: {
        handler() {
          uni.setStorageSync('searchList', this.searchList)
        },
        immediate: true
      }
    },
    data() {
      return {
        list: [],
        searchList:  uni.getStorageSync('searchList') || [],
        q: ''
      };
    },
    methods: {
      addSearchList(e) {
        this.searchList.unshift(e.value)
      },
      async getList() {
        const [error, resp] = await uni.request({
          url: 'http://localhost:3000/list',
          data: {
            q: this.q
          }
        })
        console.log(resp.data)
        this.list = resp.data
      }
    }
  }
</script>

<style lang="scss">
  .list {
    display: flex;
    flex-wrap: wrap;
  }

  .search-list {
    .item {
      margin: 10px;
    }
  }
</style>
